<template>
  <div class="statisticsFire">
    <div class="statistics-left" :class="this.leftFold ? 'leftFold' : 'unLeftFold'">
      <div class="statistics-box">
        <div class="statistics-bg"></div>
        <div class="statistics-title">火区数量统计</div>
        <div class="statistics-numBg1"></div>
        <div class="statistics-numBox">
          <div class="statistics-numLable">总数</div>
          <div class="statistics-num">{{ data && data.fireTotal }}</div>
        </div>
      </div>
      <div class="statistics-box">
        <div class="statistics-bg"></div>
        <div class="statistics-title">火区阶段统计</div>
        <div class="chartBoard">
          <div style="
              margin-left: -125px;
              color: rgb(7, 213, 228);
              font-weight: bold;
              margin-top: -30px;
            "></div>
          <div ref="leftChart" :style="Style"></div>
        </div>
      </div>
      <div class="statistics-box">
        <div class="statistics-bg"></div>
        <div class="statistics-title">火区归属地统计</div>
        <div class="list-container">
          <div class="cont-title">
            <div class="info-lable-title">区域名称</div>
            <div class="info-lable-title">火区数量</div>
          </div>
          <div class="marquee_list" ref="listBox" :style="{ top: -num + 'px' }" :class="{ marquee_top: num }">
            <div class="cont-info" v-for="item in fireOwnershipMap" :key="item.key">
              <div class="info-lable">{{ item.key }}</div>
              <div class="info-value">{{ item.value }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="statistics-right" :class="this.rightFold ? 'rightFold' : 'unRightFold'">
      <div class="statistics-box">
        <div class="statistics-bg"></div>
        <div class="statistics-title">火区类型统计</div>
        <div class="statistics-numBg2"></div>
        <div class="statistics-numBox2">
          <div class="statistics-numBox">
            <div class="statistics-numLable">重点火区</div>
            <div class="statistics-num">
              {{ data && data.significantFireTotal }}
            </div>
          </div>
          <div class="statistics-numBox">
            <div class="statistics-numLable">一般火区</div>
            <div class="statistics-num">
              {{ data && data.generalFireTotal }}
            </div>
          </div>
        </div>
      </div>
      <div class="statistics-box">
        <div class="statistics-bg"></div>
        <div class="statistics-title">火区类型统计</div>
        <div class="chartBoard">
          <div style="
              margin-left: -125px;
              color: rgb(7, 213, 228);
              font-weight: bold;
              margin-top: -30px;
            "></div>
          <div ref="rightChart" :style="Style2"></div>
        </div>
      </div>
      <div class="statistics-box">
        <div class="statistics-bg"></div>
        <div class="statistics-title">传感器部署情况统计</div>
        <div class="list-container">
          <div class="cont-title">
            <div class="info-lable-title">区域名称</div>
            <div class="info-lable-title">传感器数量</div>
          </div>
          <div class="marquee_list" ref="listBox">
            <div class="cont-info" v-for="item in sensorStatisticsMap" :key="item.key">
              <div class="info-lable">{{ item.key }}</div>
              <div class="info-value">{{ item.value }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { fireStatistics } from "@/api/data/home";

export default {
  name: "StatisticsFire",
  data() {
    return {
      leftFold: false,
      rightFold: false,
      Style: {
        width: "320px",
        height: "200px",
        position: "relative",
        left: "130px",
        top: "58px",
      },
      Style2: {
        width: "320px",
        height: "200px",
        position: "relative",
        left: "-19px",
        top: "-21px",
      },
      data: {
        fireTotal: 100,
        generalFireTotal: 60,
        significantFireTotal: 40,
        governedFireTotal: 59,
        inGovernanceFireTotal: 7,
        untreatedFireTotal: 34,
        reconnaissanceTotal: 1,
        explorationTotal: 2,
        designTotal: 1,
        governanceTotal: 0,
        fireOwnershipMap: {
          122: 1,
          321321: 1,
          aa: 1,
          克孜勒苏柯尔克孜自治州: 2,
          错错错ssss: 1,
          测试: 1,
          测试123444: 1,
          阿克苏地区: 6,
          "乌鲁木齐市经济技术开发区（头屯河区）": 1,
          巴音郭楞蒙古自治州: 7,
          哈密市: 2,
          测试管辖区: 16,
          昌吉回族自治州: 26,
          乌鲁木齐市: 8,
          石河子市: 1,
          吐鲁番市: 11,
          喀什地区: 1,
          新疆: 1,
          西安: 1,
          伊犁哈萨克自治州: 7,
          塔城地区: 4,
        },
        sensorStatisticsMap: {
          石河子南山火区: 49,
          和布克赛尔乌兰哈夏火区: 11,
          吐鲁番煤窑沟火区: 7,
          乌鲁木齐大泉湖火区: 23,
          吉木萨尔水西沟火区: 9,
          测试传感器火区: 1,
          伊宁南台子火区: 7,
          西山大泉湖: 1,
          测试传感器火区2: 2,
          呼图壁白杨河火区: 14,
          玛纳斯塔西河火区: 13,
          奇台将军戈壁火区: 27,
          米泉三道坝火区: 23,
          阜康甘沟火区: 3,
          和丰和什托洛盖火区: 43,
        },
      },
      fireOwnershipMap: [],
      sensorStatisticsMap: [],
      num: 0,
    };
  },
  methods: {
    async getData() {
      const { data } = await fireStatistics();
      this.data = data;
      if (data) {
        this.drawLeftLine();
        this.drawRightLine();
        this.fireOwnershipMap = Object.entries(this.data.fireOwnershipMap).map(
          ([key, value]) => {
            return { key, value };
          }
        );
        this.sensorStatisticsMap = Object.entries(
          this.data.sensorStatisticsMap
        ).map(([key, value]) => {
          return { key, value };
        });
        setInterval(() => {
          const first = this.fireOwnershipMap.shift();
          this.fireOwnershipMap.push(first);
          const second = this.sensorStatisticsMap.shift();
          this.sensorStatisticsMap.push(second);
        }, 2000);
      }
    },
    drawLeftLine() {
      // 基于准备好的dom，初始化echarts实例
      let leftChart = this.$echarts.init(this.$refs.leftChart);
      // 绘制图表
      let option = {
        color: ["#56acff", "#05eeff", "#0079ee", "#dadde2"],
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b}: {c} ({d}%)",
          extraCssText:
            "width:160px;height:50px;background:rgba(12,78,125,0.7);",
        },
        legend: {
          orient: "vertical",
          type: "scroll",
          left: 245,
          top: 50,
          pageIconColor: "#6495ed", //翻页下一页的三角按钮颜色
          pageIconInactiveColor: "#aaa", //翻页（即翻页到头时）
          pageIconSize: 11, //翻页按钮大小
          pageFormatter: "", //隐藏翻页的数字
          data: ["普查", "勘查", "设计", "治理"],
          textStyle: {
            fontSize: 12,
            color: "#ffffff",
          },
        },
        series: [
          {
            name: "数量占比",
            type: "pie",
            radius: ["50%", "70%"],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: "center",
            },
            emphasis: {
              label: {
                show: true,
                fontSize: "20",
                fontWeight: "bold",
              },
            },
            labelLine: {
              show: false,
            },
            data: [
              {
                value: this.data && this.data.reconnaissanceTotal,
                name: "普查",
              },
              { value: this.data && this.data.explorationTotal, name: "勘查" },
              { value: this.data && this.data.designTotal, name: "设计" },
              { value: this.data && this.data.governanceTotal, name: "治理" },
            ],
          },
        ],
      };
      leftChart.setOption(option);
      this.leftChart = leftChart
    },
    drawRightLine() {
      // 基于准备好的dom，初始化echarts实例
      let rightChart = this.$echarts.init(this.$refs.rightChart);
      // 绘制图表
      let option = {
        color: ["#56acff", "#05eeff", "#0079ee"],
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b}: {c} ({d}%)",
          extraCssText:
            "width:160px;height:50px;background:rgba(12,78,125,0.7);",
        },
        legend: {
          orient: "vertical",
          type: "scroll",
          left: 245,
          top: 50,
          pageIconColor: "#6495ed", //翻页下一页的三角按钮颜色
          pageIconInactiveColor: "#aaa", //翻页（即翻页到头时）
          pageIconSize: 11, //翻页按钮大小
          pageFormatter: "", //隐藏翻页的数字
          data: ["已治理", "治理中", "未治理"],
          textStyle: {
            fontSize: 12,
            color: "#ffffff",
          },
        },
        series: [
          {
            name: "数量占比",
            type: "pie",
            radius: ["50%", "70%"],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: "center",
            },
            emphasis: {
              label: {
                show: true,
                fontSize: "20",
                fontWeight: "bold",
              },
            },
            labelLine: {
              show: false,
            },
            data: [
              {
                value: this.data && this.data.governedFireTotal,
                name: "已治理",
              },
              {
                value: this.data && this.data.inGovernanceFireTotal,
                name: "治理中",
              },
              {
                value: this.data && this.data.untreatedFireTotal,
                name: "未治理",
              },
            ],
          },
        ],
      };
      rightChart.setOption(option);
      this.rightChart = rightChart
    },
  },
  mounted() {
    this.$nextTick(() => {
      this.getData();
    });
  },
  beforeDestroy() {
    if (this.leftChart) {
      this.leftChart.dispose();
      this.$echarts.dispose(this.leftChart)
      this.leftChart = null;
    }
    if (this.rightChart) {
      this.rightChart.dispose();
      this.$echarts.dispose(this.rightChart)
      this.rightChart = null;
    }
  },
};
</script>

<style lang="scss" scoped>
.statistics-enter-active,
.statistics-leave-active {
  .statistics-left {
    left: -410px !important;
    opacity: 0 !important;
  }

  .statistics-right {
    right: -410px !important;
    opacity: 0 !important;
  }
}

.router-enter-active,
.router-leave-active {
  .statistics-left {
    left: -410px !important;
    opacity: 0 !important;
  }

  .statistics-right {
    right: -410px !important;
    opacity: 0 !important;
  }
}

.statisticsFire {
  .statistics-left {
    transition: all 0.3s linear;
    opacity: 1;
    position: absolute;
    z-index: 99;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    left: 0;
    height: calc(100% - 300px);
    width: 380px;
    // height: 691px;
    // border: 1px solid #fff;
    top: 160px;
    margin-left: 29px;

    .statistics-box {
      width: 380px;
      height: 210px;
      // border: 1px solid #ccc;

      .statistics-bg {
        position: relative;
        top: -14px;
        width: 380px;
        height: 41px;
        background: url("../../../../assets/img/Home/抬头组件.png") no-repeat;
      }

      .statistics-numBg1 {
        position: relative;
        top: -30px;
        left: 40px;
        width: 318px;
        height: 158px;
        background: url("../../../../assets/img/Home/2火区.png") no-repeat;
      }

      .statistics-numBox {
        display: flex;
        justify-content: center;

        align-items: center;
        position: absolute;
        top: 96px;
        left: 230px;
        flex-direction: column;

        .statistics-numLable {
          // position: relative;
          // top: -18px;
          font-family: "AlibabaPuHuiTi-2-55-Regular";
          font-size: 16px;
          font-weight: normal;
          font-style: italic;
          font-stretch: normal;
          letter-spacing: 0px;
          color: #f6f9fe;
        }

        .statistics-num {
          // position: relative;
          // top: -18px;
          font-family: "AlibabaPuHuiTi-2-105-Heavy";
          font-size: 26px;
          font-weight: normal;
          font-style: italic;
          font-stretch: normal;
          letter-spacing: 0px;
          color: #3ae184;
        }
      }

      .statistics-title {
        position: relative;
        width: 310px;
        height: 31px;
        top: -50px;
        left: 47px;
        font-family: "AlibabaPuHuiTi-2-105-Heavy";
        font-size: 20px;
        font-weight: normal;
        font-style: italic;
        font-stretch: normal;
        letter-spacing: 0px;
        color: #f6f9fe;
        // box-shadow: 0px 2px 8px 0px rgba(5, 28, 55, 0.42);
      }

      .list-container {
        width: 100%;
        height: 100%;
        margin: -34px 26px;

        .cont-title {
          width: 345px;
          height: 14px;

          display: flex;
          direction: row;
          justify-content: space-between;

          .info-lable-title {
            line-height: 14px;
            font-size: 14px;
            font-weight: normal;
            font-family: "AlibabaPuHuiTi-2-55-Regular";
            font-stretch: normal;
            letter-spacing: 0px;
            color: #ffffff;
          }
        }

        .marquee_list {
          width: 92%;
          height: 86%;
          overflow: hidden;
        }

        // .marquee_top {
        //   // transition: all 0.5s;
        //   animation: marquee 1s linear infinite;
        // }
        .cont-info {
          margin-top: 6px;
          width: 345px;
          height: 38px;
          background: url("../../../../assets/img/Home/台账组件.png") no-repeat;

          background-size: 100% 100%;
          display: flex;
          direction: row;
          justify-content: space-between;
          line-height: 38px;

          .info-lable {
            width: 307px;
            height: 38px;
            margin-left: 10px;
            font-family: "AlibabaPuHuiTi-2-55-Regular";
            font-size: 16px;
            font-weight: normal;
            font-stretch: normal;
            letter-spacing: 0px;
            color: #ffffff;
          }

          .info-value {
            width: 250px;
            height: 38px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            word-break: break-all;
            text-align: right;
            margin-right: 10px;
            font-family: "AlibabaPuHuiTi-2-105-Heavy";
            font-size: 20px;
            font-weight: normal;
            font-stretch: normal;
            letter-spacing: 0px;
            color: #3ae184;
          }
        }
      }

      .chartBoard {
        color: white;
        justify-content: center;
        position: absolute;
        transform: translate(-50%, -50%);
        display: flex;
        flex-direction: column;
        font-size: 20px;
      }
    }
  }

  .statistics-right {
    transition: all 0.3s linear;
    opacity: 1;
    position: absolute;
    z-index: 99;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    right: 0;
    width: 380px;
    height: calc(100% - 264px);
    // border: 1px solid #fff;
    top: 160px;

    margin-right: 29px;

    .statistics-box {
      width: 380px;
      height: 210px;

      // border: 1px solid #ccc;
      .statistics-bg {
        position: relative;
        top: -14px;
        width: 380px;
        height: 41px;
        background: url("../../../../assets/img/Home/抬头组件.png") no-repeat;
      }

      .statistics-title {
        position: relative;
        width: 310px;
        height: 31px;
        top: -50px;
        left: 47px;
        font-family: "AlibabaPuHuiTi-2-105-Heavy";
        font-size: 20px;
        font-weight: normal;
        font-style: italic;
        font-stretch: normal;
        letter-spacing: 0px;
        color: #f6f9fe;
      }

      .statistics-numBg2 {
        position: relative;
        top: -30px;
        left: 42px;
        width: 318px;
        height: 158px;
        background: url("../../../../assets/img/Home/2火区有线条.png") no-repeat;
      }

      .statistics-numBox2 {
        display: flex;
        justify-content: center;

        align-items: center;
        position: absolute;
        // top: 231px;
        left: 214px;
        flex-direction: column;

        .statistics-numBox {
          display: flex;
          justify-content: center;

          align-items: center;
          position: relative;
          top: -145px;
          flex-direction: column;

          .statistics-numLable {
            position: relative;
            top: -18px;
            font-family: "AlibabaPuHuiTi-2-55-Regular";
            font-size: 16px;
            font-weight: normal;
            font-style: italic;
            font-stretch: normal;
            letter-spacing: 0px;
            color: #f6f9fe;
          }

          .statistics-num {
            position: relative;
            top: -18px;
            font-family: "AlibabaPuHuiTi-2-105-Heavy";
            font-size: 26px;
            font-weight: normal;
            font-style: italic;
            font-stretch: normal;
            letter-spacing: 0px;
            color: #3ae184;
          }
        }
      }

      .list-container {
        width: 100%;
        height: 100%;
        margin: -34px 26px;

        .cont-title {
          width: 345px;
          height: 14px;

          display: flex;
          direction: row;
          justify-content: space-between;

          .info-lable-title {
            line-height: 14px;
            font-size: 14px;
            font-weight: normal;
            font-family: "AlibabaPuHuiTi-2-55-Regular";
            font-stretch: normal;
            letter-spacing: 0px;
            color: #ffffff;
          }
        }

        .marquee_list {
          width: 92%;
          height: 86%;
          overflow: hidden;
        }

        .marquee_top {
          transition: all 0.5s;
        }

        .cont-info {
          margin-top: 6px;
          width: 345px;
          height: 38px;
          background: url("../../../../assets/img/Home/台账组件.png") no-repeat;

          background-size: 100% 100%;
          display: flex;
          direction: row;
          justify-content: space-between;
          line-height: 38px;

          .info-lable {
            width: 307px;
            height: 38px;
            margin-left: 10px;
            font-family: "AlibabaPuHuiTi-2-55-Regular";
            font-size: 16px;
            font-weight: normal;
            font-stretch: normal;
            letter-spacing: 0px;
            color: #ffffff;
          }

          .info-value {
            width: 250px;
            height: 38px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            word-break: break-all;
            text-align: right;
            margin-right: 10px;
            font-family: "AlibabaPuHuiTi-2-105-Heavy";
            font-size: 20px;
            font-weight: normal;
            font-stretch: normal;
            letter-spacing: 0px;
            color: #3ae184;
          }
        }
      }
    }
  }

  .leftFold {
    animation: leftMove1 0.2s linear;
    animation-fill-mode: forwards;
  }

  // .unLeftFold {
  //   animation: leftMove2 0.2s linear;
  //   animation-fill-mode: forwards;
  // }

  @keyframes leftMove1 {
    from {
      left: 0%;
    }

    to {
      left: -380px;
    }
  }

  @keyframes leftMove2 {
    from {
      left: -380px;
    }

    to {
      left: 0%;
    }
  }

  .rightFold {
    animation: rightMove1 0.2s linear;
    animation-fill-mode: forwards;
  }

  // .unRightFold {
  //   animation: rightMove2 0.2s linear;
  //   animation-fill-mode: forwards;
  // }

  @keyframes rightMove1 {
    from {
      // right: 0%;
      width: 380px;
    }

    to {
      // right: -380px;
      width: 0;
    }
  }

  @keyframes rightMove2 {
    from {
      // right: -380px;
      width: 0;
    }

    to {
      // right: 0%;
      width: 380px;
    }
  }
}
</style>
